<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04-盒子模型-水平布局</title>
    <style>
      .outer {
        width: 800px;
        height: 200px;
        border: 1px solid red;
        background-color: pink;
      }

      .inner {
        /*width: 200px;不设置宽度，就默认auto*/
        /*width: 1000px;*/
        height: 200px;
        background-color: #bfa;

        /*
                水平方向的布局 由以下几个属性共同决定 全部相加+
                margin-left
                border-left
                padding-left
                width
                padding-right
                border-right
                margin-right
            */
        margin-left: 100px;
        margin-right: 100px;

        /*
                兄弟元素间的相邻垂直外边距会取最大值
            */
      }
    </style>
  </head>

  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>
